<template>
<div>

<el-main style="margin-left:30px;width:800px;float:left;">
  <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1" class="title"><router-link to="/user/follow">我的收藏</router-link></el-menu-item>
  <el-menu-item index="2" class="title">我的关注</el-menu-item>
  <el-menu-item index="3" class="title">我的粉丝</el-menu-item>
  <el-menu-item index="4" class="title"><router-link to="/user/resource">我的捐赠</router-link></el-menu-item>
</el-menu>
  <router-view />

</el-main>
  <el-aside style="height:auto;margin-right:60px;margin-top:30px;float:right;">
 <div class="p-4 my-3 bg-white rounded">
                <div class="mb-0">
                    <p class="text-center">
                         <el-image
                         style="width: 128px; height: 128px;border-radius: 50%"
                        :src="url"
                        ></el-image>
                    </p>
                    <div class="text-center">
                        <span></span>
                        <br>
                        <small>
                            <span class="badge badge-primary">普通用户</span>
                            <span></span>
                        </small>
                        <p class="text-center">
                            <small ></small>
                        </p>
                        <p>
                            <span class="badge badge-light mr-1">用户名: {{ nickName }}</span>
                        </p>
                        <p>
                            <button type="button" onclick="donate()" class="btn btn-outline-primary btn-sm btn-block">赞助服务器</button>
                        </p>
                        <p>
                        <el-table
                        :data="userInfo"
                        style="width: 100%">
                         <el-table-column
                          width="30">
                        </el-table-column>
                        <el-table-column
                          property="blogCount"
                          label="博客"
                          width="90">
                        </el-table-column>
                        <el-table-column
                          property="questionCount"
                          label="问题"
                          width="90">
                        </el-table-column>
                        <el-table-column
                          property="commentCount"
                          label="回复">
                        </el-table-column>
                      </el-table>
                        </p>
                    </div>
                </div>
            </div>
  </el-aside>

</div>

</template>
<script>
  export default {
    name: "UserProfile",
    mounted () {this.loadUserInfo()},
    data() {
      return {
        url: '',
        userInfo:[{
          blogCount: '0',
          questionCount: '0',
          commentCount: '0',
          },],
          pageSize: 4,
          total: 0,
          nickName: '',

      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      loadUserInfo(){
        var  _this = this;
        this.$axios.post('/user/userInfo')
        .then(resp=>{
          if(resp.data.code === 200){
            _this.url = resp.data.data.avatar
            _this.nickName = resp.data.data.nickname
            _this.userInfo = [{
              blogCount: resp.data.data.blogCount,
              questionCount: resp.data.data.questionCount,
              commentCount: resp.data.data.commentCount,
          }]
          _this.$emit('getAvatar',resp.data.data.avatar);
          }

        })
        .catch(function (error) {
        })
      }
    },

  }
</script>
<style scoped>
.title{
  margin-left: 70px;
  margin-bottom: 0px;
}
</style>
